<template>
	<cover-view class="tabbar-wrapper" :style="{ paddingBottom: tabbarBottom + 'px' }">
		<cover-view class="place" :style="{ top: (tabbarBottom > 0 ? `104rpx` : `40rpx` )  }"></cover-view>
		<cover-view class="con">
			<cover-view class="tab-item" :class="{'on': currentPageRoute == tab.pagePath}"
				@click="switchTabBar(tab.pagePath)" v-for="(tab, index) in pageList" :key="index">
				<cover-image :src="tab.selectedIconPath" class="icon on"></cover-image>
				<cover-image :src="tab.iconPath" class="icon off"></cover-image>
				<cover-view class="titl">{{tab.text}}</cover-view>
			</cover-view>
		</cover-view>
	</cover-view>
</template>

<script>
	import {
		config
	} from '@/utils/config.js'
	const iconBaseUrl = config.iconBaseUrl
	export default {
		name: "tab-bar",
		data() {
			return {
				tabbarBottom: 0,
				pageList: [{
						"pagePath": "pages/index/index",
						"iconPath": `${iconBaseUrl}/home.png`,
						"selectedIconPath": `${iconBaseUrl}/home_on.png`,
						"text": "首页"
					},
					{
						"pagePath": "pages/store/map",
						"iconPath": `${iconBaseUrl}/map.png`,
						"selectedIconPath": `${iconBaseUrl}/map_on.png`,
						"text": "服务"
					},
					{
						"pagePath": "scan",
						"iconPath": `${iconBaseUrl}/scan.png`,
						"selectedIconPath": `${iconBaseUrl}/scan.png`,
						"text": "扫码"
					},
					{
						"pagePath": "pages/cart/index",
						"iconPath": `${iconBaseUrl}/cart.png`,
						"selectedIconPath": `${iconBaseUrl}/cart_on.png`,
						"text": "购物车"
					},
					{
						"pagePath": "pages/user/index",
						"iconPath": `${iconBaseUrl}/user.png`,
						"selectedIconPath": `${iconBaseUrl}/user_on.png`,
						"text": "我的"
					}
				]
			}
		},
		props: {
			isPlace: {
				type: Boolean,
				value: true
			}
		},
		computed: {
			currentPageRoute() {
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].route //获取当前页面路由
				console.log(curRoute, 'curRoute')
				return curRoute
			}
		},
		beforeCreate() {
			console.log('onload*****')
		},
		mounted() {
			const fixSize = () => {
				const {
					safeAreaInsets,
					platform
				} = uni.getSystemInfoSync()

				console.log(uni.getSystemInfoSync())
				let barpx = 0
				if (safeAreaInsets && safeAreaInsets.bottom) {
					if (safeAreaInsets.bottom > 0) {
						barpx = safeAreaInsets.bottom
					} else {
						barpx = 0
					}
				}
				if (platform == "devtools") {
					this.tabbarBottom = barpx || 6
				} else if (platform == "ios") {
					this.tabbarBottom = barpx || 6
				} else if (platform == "android") {
					this.tabbarBottom = barpx || 10
				}
			}


			fixSize()
		},
		methods: {
			switchTabBar(pagePath) {
				if (pagePath == 'scan') {
					const token = uni.getStorageSync('token'); // 从缓存中获取token
					if (token) {
						uni.scanCode({
							success: function(res) {
								console.log(res);
								console.log(res.path.indexOf("pages/store/index"));
								if (res.path.indexOf("pages/store/index") != -1) {
									console.log(res.path);
									uni.reLaunch({
										url: '/'+res.path
									})
									// pages/store/index?scene=shopId%3D31%26inTell%3D1
									return
								}


								// console.log('条码内容：' + res.path.replace('pages/online/index?scene=equipmenNo%3D',''));
								if (res.path.indexOf("pages/online/index?scene=equipmenNo%3D") != -1) {
									console.log('条码内容：' + res.path.replace(
										'pages/online/index?scene=equipmenNo%3D', ''));
									const equipmentNo = '' + res.path.replace(
										'pages/online/index?scene=equipmenNo%3D', '') // res.resul
									// const equipmentNo = 'RKE0500700' // res.resul
									uni.setStorageSync('equipmentNo', equipmentNo)
									uni.setStorageSync('BLUE_NAME', 'B6216') // 蓝牙名字
									uni.setStorageSync('UUID_SERVICE',
										'00010203-0405-0607-0809-0A0B0C0D1910') //服务UUID，设备方提供
									uni.setStorageSync('UUID_CHAR',
										'00010203-0405-0607-0809-0A0B0C0D2B10') //特征值UUID，设备方提供
									uni.reLaunch({
										url: `/pages/online/index?equipmentNo=${equipmentNo}`
									})
								} else {
									const equipmentNo = '' + res.path.replace(
										'pages/index/index?scene=equipmenNo%3D', '') // res.resul
									// const equipmentNo = 'RKE0500700' // res.resul
									uni.setStorageSync('equipmentNo', equipmentNo)
									uni.setStorageSync('BLUE_NAME', 'B6216') // 蓝牙名字
									uni.setStorageSync('UUID_SERVICE',
										'00010203-0405-0607-0809-0A0B0C0D1910') //服务UUID，设备方提供
									uni.setStorageSync('UUID_CHAR',
										'00010203-0405-0607-0809-0A0B0C0D2B10') //特征值UUID，设备方提供
									uni.reLaunch({
										url: `/pages/online/index?equipmentNo=${equipmentNo}`
									})
								}
							}
						});
					} else {
						uni.redirectTo({
							url: "/pages/login/index"
						})
					}
				} else {
					if (pagePath == this.currentPageRoute) return
					uni.redirectTo({
						url: `/${pagePath}`
					})
				}

			}
		}
	};
</script>

<style lang="scss" scoped>
	.tabbar-wrapper {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0rpx;
		z-index: 10;
		height: 139rpx;
		// background: url('../../static/bg-tabbar.png') top center no-repeat;
		// background-size: cover;
		background: transparent;
		overflow: hidden;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.con {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 3;
			display: flex;
			height: 139rpx;
			background: transparent;
		}

		.place {
			position: absolute;
			left: 0;
			right: 0;
			top: 40rpx;
			bottom: 0;
			z-index: 2;
			// height: 99rpx;
			//  margin-top: 40rpx;
			// height: 99rpx;
			background: #fff;
		}
	}

	.tab-item {
		position: relative;
		flex: 1;
		margin-top: 40rpx;
		padding: 10rpx 0 0;
		height: 99rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.tab-item .icon {
		display: none;
		margin: 0 auto;
		width: 51rpx;
		height: 51rpx;
	}

	.tab-item .off {
		display: block;
	}

	.tab-item .titl {
		margin-top: 3rpx;
		line-height: 30rpx;
		text-align: center;
		font-size: 20rpx;
		color: #333333;
	}

	.tab-item.on .titl {
		color: #333333;
	}

	.tab-item.on .on {
		display: block;
	}

	.tab-item.on .off {
		display: none;
	}

	.tab-item:nth-child(3) {
		position: relative;
		// padding-bottom: 0 0 20rpx !important;
		margin: 0 auto 0;
		flex: 0 0 122rpx !important;
		height: 139rpx;
		width: 122rpx;
		background-color: #fff;
		border-radius: 50% 50% 0 0;

		// box-sizing: border-box;
		.titl {
			display: none;
		}

		.icon {
			margin: 2rpx auto 0 !important;
			width: 98rpx;
			height: 98rpx;
			background-color: #fff;
		}
	}

	.border-top::before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		right: 0;
		border-top: 2rpx solid #eeeeee;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
		.tabbar-wrapper {
			height: calc(149rpx + env(safe-area-inset-bottom)) !important;
			height: calc(149rpx + constant(safe-area-inset-bottom)) !important;
		}

		.con {
			bottom: calc(10rpx + env(safe-area-inset-bottom)) !important;
			bottom: constant(safe-area-inset-bottom) !important;
		}
	}
</style>
